<template>
    <div class="SexSelector">
        <div   :class="[this.innerSex == 1? 'active': '']" @click="selectMale">男</div>
        <div   :class="[this.innerSex == 2? 'active': '']" @click="selectFemale">女</div>
    </div>
</template>


<script>
export default{
    name: 'SexSelector',
    props: {
        sex: [String, Number],
      
    },
    watch:{
        sex: function(newQuestion){     
            this.innerSex = newQuestion;
        }
    },
    data: function(){
        return{
            innerSex: '',
         
            enumsSelect: [{
                code: 1,
                text: '男'
            },{
                code: 2,
                text: '女'
            }],     
        }
    },
    methods:{
        selectMale(){
            let male = 1;
            this.innerSex = male;
            console.log(this.innerSex)
            this.$emit('update:sex', male);
        },
        selectFemale(){
            let female = 2;
            this.innerSex = female;
            console.log(this.innerSex)
            this.$emit('update:sex', female);
        }
    },
    created(){
    }
}
</script>


<style scoped lang='less'>
.SexSelector{
    div{
        display: inline-block;
        width: 70px;
        height: 30px;
        border: 1px solid #ccc;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        border-radius: 3px;

        &.active{
            color: red ;
            border-color: #B1CDFF;
        }
    }
    
}
</style>